<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../css/zxiu_dl.css"/>
	</head>
	<body>
		<header class="header">
			<div class="top_pink"> 					
				<img src="../img/3.png"  onclick="javascript:history.back(-1);"/>
				<span class="text">登陆</span>
				<img src="../img/zhuce.png" class="pink_zhuce"/>
			</div>
		</header>
		
		<section class="section">
			<p class="zh" id="zh">
				<input type="text" placeholder="账号"/>
			</p>
			<p class="mm" id="mm">
				<input type="text" placeholder="密码"/>
			</p>
			<p class="jzmm">
				<label>
					<input type="checkbox"/><span>记住密码</span>
				</label>
				<a href="#">忘记密码？</a>
			</p>
			<button class="dl_btn" id="dl_btn">
				<span>登录</span>
			</button>
		</section>
		
		<footer class="footer">
			<div class="footer_img">
				<dl>
					<dt><img src="../img/sy.png"/></dt>
					<dd>首页</dd>
				</dl>
				<dl>
					<dt><img src="../img/fl.png"/></dt>
					<dd>分类</dd>
				</dl>
				<dl>
					<dt><img src="../img/gwc.png"/></dt>
					<dd>购物车</dd>
				</dl>
				<dl>
					<dt><img src="../img/wdx.png"/></dt>
					<dd>我的秀</dd>
				</dl>
				<dl>
					<dt><img src="../img/fd.png"/></dt>
					<dd>更多</dd>
				</dl>
			</div>
		</footer>
		
		<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/flexible_css.debug.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(".pink_zhuce").on("click",function () {
				location.href = "zxiu_eleven.html";
			})
		</script>
		
		<script type="text/javascript">
			window.onload = function () {
				var dl_btn = document.getElementById("dl_btn");
				dl_btn.onclick = function (e) {
					e.preventDefault();
					var zh = document.getElementById("zh").value;
					var mm = document.getElementById("mm").value;
					if (zh && mm) {
						reg(zh,mm);
					} else{
						alert("账号和密码均不能为空")
					}
				}
				
				function reg (zh,mm) {
		           var xhr = new XMLHttpRequest();
		           xhr.onreadystatechange = function () {
		           		if (xhr.readyState == 4 && xhr.status == 200) {
		           			/*var data = JSON.parse(xhr.responseText);
		           			if (data.msg) {
		           				alert(data.msg);
		           				console.log(data.msg);
		           			} else{
		           				alert("登录成功");
		           				console.log(data);
		           			}*/
		           			
		           			var obj = JSON.parse(xhr.responseText);
		           			var result = document.getElementById("result");
		           			result.innerHTML = obj.msg;
		           			
		           		}
		           }
		           xhr.open("post","#",true);
		           xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
		           var str = "zh=" + zh + "&mm=" + mm;
		           //console.log(str);
		           xhr.send(str);
				}				
			}
		</script>
	</body>
</html>
